import React, { useState } from 'react';
import { Form, DatePicker, Space, Button, Select } from "antd";
import { SearchOutlined } from '@ant-design/icons';
const { RangePicker } = DatePicker;
const { Option } = Select;

export default function Search({ show }) {
    let [form] = Form.useForm();
    let [type, setType] = useState("startTime");
    let [value, setValue] = useState(['', '']);
    const handleSearch = () => {
        console.log(type, value);
        show({ type, value, current: 1 });
    }

    return (
        <>
            <Form name='search' form={form}>
                <Space direction='horizontal'>
                    <Select
                        defaultValue="startTime"
                        style={{ width: 100 }}
                        onChange={(value) => { setType(value) }}
                    >
                        <Option value="startTime">下单时间</Option>
                        <Option value="finishTime">完成时间</Option>
                    </Select>
                    <RangePicker allowEmpty={[true, true]} style={{ width: 300 }} onChange={(dates, dateStr) => { setValue(dateStr) }} />
                    <Button icon={<SearchOutlined />} onClick={handleSearch}></Button>
                </Space>
            </Form>
        </>
    )
}
